<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useRoute } from 'vue-router';
  import { queryArticleSpColumnList } from '/@/api/article';
  import type { ArticleSpColumnRecord } from '/@/api/model/articleModel';
  import { useGlobalScroll } from '/@/hooks/useScroll';
  import { useArticleColumnStore } from '/@/store/modules/articleColumn';

  const spColumnList = ref<ArticleSpColumnRecord[]>([]);

  const page = ref(1);
  const { arrivedState } = useGlobalScroll({ offset: { bottom: 100 } });
  const columnsLoading = ref(false);
  const articleColumnStore = useArticleColumnStore();
  articleColumnStore.fetchArticleColumns();

  const route = useRoute();
  const user_id = ref<number>();

  watch(
    () => route.params.id,
    (id) => {
      user_id.value = parseInt(Array.isArray(id) ? id[0] : id, 10) ?? 0;
    },
    { immediate: true },
  );

  watch(
    [page],
    async ([page]) => {
      if (columnsLoading.value) return;
      columnsLoading.value = true;
      const result = await queryArticleSpColumnList({
        user_id: user_id.value,
        sorts: '',
        page: page,
        size: 20,
      });
      spColumnList.value.push(...result.list);

      columnsLoading.value = false;
    },
    { immediate: true },
  );
  watch(
    () => arrivedState.bottom,
    (isReachBottom) => {
      if (isReachBottom) {
        if (columnsLoading.value) return;
        page.value++;
      }
    },
  );
</script>
<template>
  <div>
    <a-card :bordered="false">
      <a-skeleton animation v-if="columnsLoading">
        <a-space direction="vertical" :style="{ width: '100%' }" size="large">
          <a-skeleton-line :rows="10" />
        </a-space>
      </a-skeleton>
      <a-list class="list-demo-action-layout" :bordered="false" v-else>
        <a-list-item v-for="(item, index) in spColumnList" :key="index" class="px-[2px] py-[10px]">
          <a-row>
            <a-col :span="5">
              <a-image width="150" height="84" :src="item.cover" />
            </a-col>
            <a-col :span="12">
              <div class="text-[16px] text-[#1d2129] font-[500]">{{ item.name }}</div>

              <a-typography-paragraph
                class="text-[14px] text-[#4e5969] font-[400]"
                :ellipsis="{
                  rows: 1,
                  showTooltip: true,
                }"
              >
                {{ item.desc }}
              </a-typography-paragraph>
              <div class="mt-[2px] text-[#86909c] text-[14px] font-[400]">
                <span>{{ item?.createTime }}</span>
                <span class="ml-[3px]">·</span>
                <span> 文章数 {{ item?.article_num }}</span>
                <span> ·</span>
                <span class="ml-[3px]"> 订阅数 {{ item?.subscribe_num }}</span>
              </div>
            </a-col>
            <a-col :span="7" class="text-right">
              <a-button type="primary" class="mt-[10px]">
                <template #icon>
                  <icon-plus />
                </template>
                <!-- Use the default slot to avoid extra spaces -->
                <template #default>订阅</template>
              </a-button>
            </a-col>
          </a-row>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>
